Nivel 1 JS

Propiedades

Clases, el ClassList y Métodos de ClassList

En este apartado se profundiza en todas las opciones que ofrecen las clases CSS desde JavaScript, para ejemplificarlo de forma correcta se trabajará en base al siguiente código HTML:

Add()

Este método permite asignar una clase a un elemento HTML, en otras palabras permite añadir un valor al atributo "class" de un elemento.

Ejemplo

Resultado

En este ejemplo se utilizan las herramientas de desarrollador del navegador para inspeccionar el elemento que posee la clase HTML y de ese modo corroborar el cómo el método "add()" añadió una segunda clase llamada "grande".

Remove(): Este método tiene exactamente el efecto opuesto al método anterior, así como el método "add()" añade una clase en el atributo "class" de un elemento HTML la propiedad "remove()" elimina una clase de este atributo, en sí la forma de emplear este método es igual al de "add()".

Ejemplo

Item()

Este método retorna los valores de la propiedad "class" de un elemento, es decir del mismo modo en el que se selecciona un dato de un array este método retorna el nombre de la clase que se encuentre en esa posición, por lo tanto la primera clase está en la posición "0", una segunda clase estaría en la posición "1" y así sucesivamente.

Este método no afecta a las propiedades, su objetivo es únicamente el seleccionar una de las clases que posea un elemento HTML.

Ejemplo

Resultado

En este ejemplo se selecciona un elemento que posee la clase "titulo", luego se le aplica el objeto classList con el método "item", lo que resulta en que el método retorne el nombre de la clase en la posición "0", luego este dato se imprime en pantalla.

contains()

Este método es similar al anterior, con la diferencia de que este no retorna el nombre de la clase, en su lugar retorna un dato booleano, ya que la función de este método es únicamente comprobar si una clase determinada existe en un elemento o no, por lo tanto este método retorna un dato booleano que podría ser aprovechado de diversas maneras, como por ejemplo en una estructura de condición.

Ejemplo

Resultado

En este ejemplo se utiliza la propiedad "contains" para determinar si el elemento HTML seleccionado posee la clase "grande" y en base a esto imprimir una respuesta en pantalla.

Toggle()

Este método se puede considerar como la mezcla de "add()" y de "remove", ya que este puede tanto añadir como eliminar una clase de un elemento, más específicamente por defecto, este método determina si el elemento posee la clase definida, de poseerla este la elimina, y si se da el caso que no la posea la añade.

Ejemplo

Esta propiedad también cuenta con un segundo valor opcional, el cual se usa para forzar la clase, se trata de un valor booleano, el cual en el caso de ser "true" el método siempre añadirá la clase, si el elemento no la posee, y no la eliminará si esta ya es poseída por el elemento, por otro lado en el caso de definirse como "false" el método siempre que la encuentre eliminará la clase, y esta no será añadida por este.

En este ejemplo se aplicó la propiedad "toggle" al elemento seleccionado, con los valores de "grande" y "false", por lo que si el elemento posee la clase "grande" esta será eliminada.

Nota: Este método no solo modifica los valores del atributo "class", sino que a su vez también retorna valores booleanos, al igual que lo hace el método "contains", por lo tanto cuando el método añade la clase retorna "true" y cuando la elimina retorna "false".

Replace()

Este método al igual que los anteriores retorna un valor booleano que indica si el elemento HTML posee o no la clase, con la diferencia de que este método permite reemplazar una clase por otra, pero esto solo lo hace en el caso de que la clase sí exista, por lo tanto si la clase existe el método reemplazará la clase y devolverá el valor "true", de lo contrario el método no hará nada y retornará el valor "false".

Para esto este método recibe dos valores, el primero corresponde al nombre de la clase que será reemplazada y el segundo corresponde al nombre de la clase que será añadida en el elemento.

Ejemplo

Resultado

En este ejemplo se reemplaza la clase "grande" del elemento seleccionado, ya que esta clase sí era poseída por este se retorna un "true", de haberse dado el caso de que el elemento no tuviese la clase definida nada hubiera pasado, y el método retornaría false.